<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>全部书籍</title>
    <script src="/common/lib/jquery-3.6.0.js"></script>
    <script src="/common/lib/vue.js"></script>
    <script src="/common/lib/vue-lazyload.js"></script>
    <link rel="stylesheet" href="/common/style.css">
</head>
<body>
    
    <div class="head">
        <button class="menubtn" style="background-image: url('/common/img/slider_handle.png');background-size: contain" onclick="toggledrawer()"></button>
        <p class="title" id="title"></p>
        <div class="flexspace"></div>
        <input type="text" placeholder="搜索书名，作者" class="menutextbox" name="search" id="txtsearch">
        <input type="button" class="menubtn" style="background-image: url('/common/img/ic_menu_searchinlibrary.png')" value="" onclick="doSearch($('#txtsearch').val())">
        
    </div>

    <div class="container">
        <div class="read">
            <div class="booklist auto-scroll" id="booklist">
                <a class="bookitem" v-for="book in books" style="display: block" v-bind:href="'/api/open/'+book.UUID" target="_self">
                    <img v-lazy="'/api/cover/'+book.UUID" class="bookcover" alt="">
                    <p style="text-decoration: none" class="bookname">{{book.displayName}}</p>
                </a>
            </div>
        </div>
        <div id="drawermain" style="display: none;" class="drawerslider">
            <div id="drawerbg" class="drawerbg fadeout" onclick="toggledrawer()"></div>
            <div id="drawerfg" class="drawerfg drawerhide">
                <div class="leftmenu auto-scroll">
                    <div class="drawer-head">
                        <img src="/common/img/ic_launcher_round.png" style="margin-top: 30px; margin-left: 20px;" width="64" height="64" alt="">
                        <p style="margin-left: 20px; font-weight: bold;">EPUBium - 书架</p>
                    </div>
                    <div class="uppermenu">全部</div>
                    <div class="drawermenuitems">
                        <div class="menuitem darkhover bookimgbg" onclick="loadAll()">全部书籍</div>
                    </div>
                    <div class="line"></div>

                    <div class="uppermenu">文件夹</div>
                    <div class="drawermenuitems" id="folderlist">
                        <div class="menuitem bookimgbg darkhover" v-for="folder in folders" v-on:click="loadFolder(folder)">{{folder.displayName}}</div>
                        
                        <div class="menuitem" v-if="folders.length==0">空空如也</div>
                    </div>
                    <div class="line"></div>
                    <div class="uppermenu">选项</div>
                    <div class="drawermenuitems">
                        <div class="menuitem darkhover" style="background-image: url(/common/img/add.png);" onclick="scanbook()">扫描书籍</div>
                        <div class="menuitem darkhover" style="background-image: url(/common/img/theme.png);" onclick="changetheme()">更换主题包</div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="snackbar"></div>

    <div id="blockloading" class="mainsizing blockloading" style="display: none">
        <div class="centerscreen blockloadingfg">
            <div style="display: flex;flex-direction: row;width: 80px;margin-left: 35px;margin-top: 60px; justify-content: space-around">
                <div style="animation-delay: 300ms" class="blockloadingwhite"></div>
                <div style="animation-delay: 600ms" class="blockloadingwhite"></div>
                <div style="animation-delay: 900ms" class="blockloadingwhite"></div>
            </div>
            <div id="loadingtext1" style="font-size: 20px;font-weight: bold;color: white;line-height: 35px;margin-top: 25px;text-align: center">加载中</div>
        </div>
    </div>

    <script>

        function toast(str){
            $(".snackbar").text(str).removeClass("snackbar-anim");
            setTimeout(function (){$(".snackbar").addClass("snackbar-anim")},40);
        }
		
		window.blockloading=function (text) {
            document.getElementById("blockloading").style.display="block";
            document.getElementById("loadingtext1").innerText=text;
        };
		window.unblockloading=function () {
            document.getElementById("blockloading").style.display="none";
        }
    </script>

    <script>
        Vue.use(VueLazyload);

        var menuController = new Vue({
            el:"#folderlist",
            data:{
                folders:[]
            },
            methods:{
                loadFolder:function(folder){
                    loadFolder(folder);
                }
            }
        });
        
        var libraryController = new Vue({
           el:"#booklist",
           data:{
               books:[]
           }
        });
        
        $(function (){
            loadFolderList();
            loadAll();
        })

        function loadFolderList(){
            $.ajax({url:"/api/folders",success:function (result) {
                menuController.folders = JSON.parse(result);
            }});
        }

        function loadFolder(folder){
            $.ajax({url:"/api/folder/"+folder.UUID,success:function (result) {
                    libraryController.books = JSON.parse(result);
                    $("#title").text(folder.displayName);
                    document.title=folder.displayName;
            }});
            toggledrawer();
        }
        function loadAll(){
            $.ajax({url:"/api/library",success:function (result) {
                    libraryController.books = JSON.parse(result);

                    $.ajax({url:"/api/devname",success:function (result2) {
                            $("#title").text(result2+" 的书");
                            document.title="全部书籍";
                    }});
            }});
            if(draweropen){
                toggledrawer();
            }
        }
        function doSearch(keyword){
            $.ajax({url:"/api/library",success:function (result) {
                    var preresult = JSON.parse(result);
                    libraryController.books=[];
                    for (let i = 0; i < preresult.length; i++) {
                        const entry = preresult[i];
                        if(entry.displayName.indexOf(keyword)!=-1){
                            libraryController.books.push(entry);
                        }
                    }
                    $("#title").text("搜索结果");
                    document.title="搜索结果";
            }});
        }

        var draweropen = false;
        function toggledrawer(){
            if(!draweropen){
                $("#drawermain").show();
                $("#drawerbg").removeClass("fadeout");
                $("#drawerfg").removeClass("drawerhide");
            }
            else{
                $("#drawerbg").addClass("fadeout");
                $("#drawerfg").addClass("drawerhide");
                setTimeout(()=>{
                    $("#drawermain").hide();
                },300);
            }
            draweropen=!draweropen;
        }

        function scanbook(){
            blockloading("扫描中...");
            $.ajax({
                url:"/api/scan",
                success:function (result) {
                    unblockloading();
                    toast(result);
                    loadAll();
                    loadFolderList();
                },
                err:function(a,b,c){
                    toast("扫描出错");
                    loadAll();
                    loadFolderList();
                }
            });
        }

        function changetheme(){
            $.ajax({
                url:"/api/respack",
                success:function (result) {
                   
                },
                err:function(a,b,c){
                    toast("不支持更换主题包");
                }
            });
        }
    </script>
</body>
</html>